<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>miniVue</title>
</head>
<body>
    <div id="app">
        msg:<h3>{{msg}}</h3>
        count:<h4>{{count}}</h4>
        <h3>v-text测试</h3>
        <p v-text="msg"></p>
        <h3>v-model测试</h3>
        input:<input type="text" v-model="count">
        <h3>v-on:click测试</h3>
        <button v-on:click="increase">count++</button>
        <button  v-on:click="changeMsg">修改msg</button>
        <button v-on:click="recoverMsg">恢复msg</button>
        <button  v-on:click="consoleVue">打印miniVue</button>
        <p>{{vueMsg}}</p>
        <p v-show="false">v-show</p>

    </div>
    
</body>
<script src="./miniVue.js"></script>
<script>
    const app = new miniVue({
        el: '#app',
        data: {
            msg: 'hello my miniVue',
            count: 888,
            vueMsg: ''
        },
        methods: {
            increase() {
                this.count++
            },
            changeMsg() {
                this.msg = 'hello 胡兵'
            },
            recoverMsg() {
                console.log(this)
                this.msg = 'hello my miniVue'
            },
            consoleVue() {
                console.log(this)
                this.vueMsg = '控制台查看'
            }
        },
    })
</script>
</html>